<template>
	<view class="content">
		<view class="cpt-mask" v-if="mark==1"></view>
		<view class="pt-3">
			<form @submit="formSubmit" @reset="formReset">
				<view class="parse-bar">
					<input class="parse-input" v-model="txt" placeholder="粘贴视频链接开始解析" />
					<view class="parse-btn-group">
						<button class="parse-btn-submit" form-type="submit">开始解析</button>
						<button class="parse-btn-clear" type="default" form-type="reset">清除</button>
					</view>

				</view>

			</form>
		</view>

		<view class="mt-3">
			<button class="cv b3" type="default" style="margin-right: 20rpx;" @click="paste()">粘贴</button>
			<button class="cv b1" type="default" style="margin-right: 20rpx;" @click="copy()">复制</button>
			<button class="cv b2" type="default" @click="download()">下载</button>
		</view>
	
		<view style="text-align: center;margin-top: 20px;width: calc(100% - 60rpx);">
			<h3 style="border-top: 1px solid #e5e5e5;padding: 20rpx 30rpx 0;">已支持的平台</h3>
		</view>

		<view class="pt-3" style="padding: 30rpx 30rpx 0;text-align: center;">
			<uni-tag class="tag" text="抖音" type="default"></uni-tag>
			<uni-tag class="tag" text="快手" type="warning"></uni-tag>
			<uni-tag class="tag" text="皮皮虾" type="primary"></uni-tag>
			<uni-tag class="tag" text="微视" type="success"></uni-tag>
			<uni-tag class="tag" text="微博" type="error"></uni-tag>
			<uni-tag class="tag" text="开眼" type="warning"></uni-tag>
			<uni-tag class="tag" text="陌陌" type="default"></uni-tag>
			<uni-tag class="tag" text="全民K歌" type="error"></uni-tag>
			<uni-tag class="tag" text="最右" type="warning"></uni-tag>
		</view>

		<view class="pt-3" style="display: flex;justify-content: center;">
			<view class="vide-bar" v-if="url">
				<video id="myVideo" :src="url" controls></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '视频去水印',
				txt: "", //粘贴的文本
				url: "", //解析出来的url
				mark: 0
			}
		},
		onLoad() {
			// 打开调试
			// uni.setEnableDebug({
			// 	enableDebug: true
			// })
		},
		methods: {
			formSubmit: function(e) {
				var self = this;
				self.url = "";
				self.mark = 1;
				uni.showLoading({
					title: '加载中'
				});
				self.$http({
					url: "/api/parse",
					data: {
						txt: self.txt
					},
					method: "POST"
				}).then(res => {
					if (res.data.code != 200) {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
							duration: 2000
						})

						setTimeout(function() {
							self.mark = 0;
							uni.hideLoading();
						}, 2000);
						return false;
					}

					self.url = res.data.url;
					self.mark = 0;
					uni.hideLoading();
				})

			},
			formReset: function(e) {
				this.url = "";
				this.txt = "";
			},
			copy() {
				var value = this.url;
				if (value == "") {
					uni.showToast({
						title: "复制内容为空",
						icon: "none",
						duration: 2000
					})
					return false;
				}
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: "复制成功",
							icon: "success",
							duration: 2000
						})
					}
				})
			},
			download() {
				var self = this;
				if(self.url == "")
				{
					uni.showToast({
						title: "下载地址不存在",
						icon: "none",
						duration: 2000
					})
					return false;
				}
				
				uni.showLoading({
					title: '下载中请稍后ing...'
				});
				self.mark = 1;

				self.$download({
					url: "/api/download?url=" + encodeURIComponent(self.url)
				}).then(res => {
					//console.log(res);
					if (res.statusCode === 200) {
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.hideLoading();
								self.mark = 0;
								uni.showToast({
									title: "保存相册成功",
									icon: "success",
									duration: 2000
								})
							},
							fail: (errMsg) => {
								uni.hideLoading();
								self.mark = 0;
								uni.showToast({
									title: "保存相册失败",
									icon: "none",
									duration: 2000
								})
							},
							complete: (errMsg) => {
								self.mark = 0;
								uni.hideLoading();
							}

						});
					} else {
						uni.hideLoading();
						self.mark = 0;
						uni.showToast({
							mask: true,
							title: '下载失败',
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			paste() {
				var self = this;
				uni.getClipboardData({
					success: function(res) {
						if (res.data == "") {
							uni.showToast({
								title: "粘贴内容不存在",
								icon: "none",
								duration: 2000
							})
							return false;
						}
						
						self.txt = res.data;
						//粘贴成功自动解析
						self.formSubmit();
						// uni.showToast({
						// 	title: "粘贴成功",
						// 	icon: "success",
						// 	duration: 2000
						// })
					}
				});
			}
		}
	}
</script>

<style scoped>
	.pt-3 {
		padding-top: 30rpx;
	}

	.mt-3 {
		margin-top: 30rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.parse-bar {
		display: flex;
		flex-wrap: nowrap;
	}

	.parse-input,
	.parse-btn-clear,
	.parse-btn-submit {
		display: inline-block;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 0;
		font-size: 20rpx;
	}

	.parse-input {
		border: 1px solid #5e72e4;
		border-radius: 8rpx 0 0 8rpx;
		padding-left: 20rpx;
		width: 450rpx;
	}

	.parse-btn-group {
		height: 60rpx;
		border-color: #5e72e4;
		background-color: #5e72e4;
		box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
		border-radius: 0 8rpx 8rpx 0;
		border: 1px solid #5e72e4;
	}

	.parse-btn-submit {
		border-right: 1px solid #818fe1;
	}

	.parse-btn-clear,
	.parse-btn-submit {
		background-color: #5e72e4;
		color: #ffffff;
	}

	.parse-btn-clear::after,
	.parse-btn-submit::after {
		border: none;
	}

	.tag {
		margin-left: 15rpx;
		margin-bottom: 20rpx;
		display: inline-block;
	}

	.cv {
		display: inline-block;
		font-size: 26rpx;
	}

	.cv::after {
		border: none;
	}

	.b1 {
		color: #212529;
		background-color: #f4f5f7;
		border-color: #f4f5f7;
		box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
	}

	.b3 {
		color: #ffffff;
		background-color: #a0a6b3;
		border-color: #a0a6b3;
		box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
	}

	.b2 {
		color: #fff;
		background-color: #212529;
		border-color: #212529;
		box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
	}

	.vide-bar {
		width: 500rpx;
		height: 800rpx;
	}

	#myVideo {
		width: 500rpx;
		height: 800rpx;
	}

	.cpt-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		z-index: 99;
	}
</style>
